<template>
  <s-layout title="时时乐">
    <view class="lottery-container">
      <div class="lottery_box">
        <image
          class="bgi"
          src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250412/f73676631dc7088fd390a3a24beb392f.png"
          mode="widthFix"
        ></image>
        <!-- 顶部奖金展示 -->
		<view
		  class="my"	
		  @click="sheep.$router.go('/pages/tuangou/lottery_result_day')"
		>
		  我的中奖记录
		</view>
        <view class="topprice">￥</view>
        <view class="toppricenum">{{ price }}</view>
<!--        <view class="toppricenum">{{ weeks[selectedIndex].price }}</view> -->
        <!-- 转盘抢红包区域 -->
        <view class="lottery-grid">
          <view style="display: flex;align-items: center;justify-content: center;padding-top: 100rpx;">
            <view class="zhuanpan">
              <view
                class="point"
                v-for="item in 9"
                :key="item"
              ></view>
              <view
                class="content"
                :style="{'background-image':groupbg,transform:'rotateZ('+rotate+'deg)',transition: 'transform '+second+'s'}"
              >
                <template
                  v-for="(item,index) in display_prizes"
                  :key="index"
                >
                  <view
                    class="item"
                    :style="{transform: 'rotateZ('+index*(360/8)+'deg)'}"
                  >
                    <view class="name">{{item.name}}</view>
                  </view>
                </template>
              </view>
              <view class="arrow"></view>
            </view>
          </view>
        </view>
      </div>
      <!-- 抢红包按钮 -->
      <view class="cjbtn">
        <view
          class="cjtext"
          @click="start"
        >
          点击立即抢红包
        </view>

      </view>
      <!-- 中奖名单 -->
      <view class="textzj">
        中奖名单
      </view>
      <view
        class="textwq"
        @click="sheep.$router.go('/pages/tuangou/lottery_list_time')"
      >
        全部名单
        <view class="jt" />
      </view>
      <view class="mingdan">
		  <template v-if="desensitizedMobile.length">
			  <swiper
			    :autoplay="true"
			    :interval="1000"
			    :duration="3000"
			    :circular="true"
			    :vertical="true"
			    :disable-touch="true"
			    style="height: 170rpx;"
			    :slides-per-view="1"
			    :display-multiple-items="3"
			    ref="mySwiperRef"
			  >
			    <swiper-item v-for="(message, index) in desensitizedMobile">
			      <view class="swiper-item">
			        <view class="item">
			          {{ message.user.nickname }}
			        </view>
			        <view
			          class="item"
			          style="width: 155rpx;"
			        >
			          {{ message.phonetm }}
			        </view>
			        <view
			          class="item"
			          style="width: 80rpx;"
			        >
			          {{ message.product_name }}
			        </view>
			        <view
			          class="item"
			          style="width: 255rpx;"
			        >
			          {{ message.create_time }}
			        </view>
			      </view>
			    </swiper-item>
			  </swiper>
		  </template>
		  <template v-else>
			  <view class="nodata">
			  	暂无中奖名单
			  </view>
		  </template>
        
      </view>
      <!-- 中奖弹窗 -->
      <view
        class="prize-popup"
        v-if="show_result"
      >
        <view class="popup-content">
          <view class="popup-title">抢红包结果</view>
          <view class="popup-prize">{{ win_prize.product_name }}</view>
          <!-- <image :src="win_prize.image || ''" class="popup-img"></image> -->
          <view
            class="popup-btn"
            @click="close_popup(win_prize.product_name)"
          >确定</view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, reactive, computed, onUnmounted } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import sheep from '@/sheep';

// 当前时间是否是周日7~9点
const dateflag = ref(true)
// 用户是否拥有抢红包资格
const payflag = ref(false)
// 用户是否已经抽过奖
const prizeflag = ref(true)
// 奖池金额
const price = ref('0.00')
// 订单id
const order_sn = ref('')
// 中奖名单
const messages = ref([])

// 状态定义
const state = reactive({
  prize_list: [],
});


// const chance_count = ref(3);
// const is_center_button = ref(true);
// const current_index = ref(-1);
// const is_running = ref(false);
const win_prize = ref({});
// 中奖弹窗
const show_result = ref(false);

const cjflag = ref(false)

const prize_list = ref([])
const groupbg = ref('');
const color1 = ref('#ffed85');
const color2 = ref('#ffe020');
const rotate = ref(0);
const second = ref(4);
const isactive = ref(false);
const activeIndex = ref(0);
const history = ref([]);

const display_prizes = computed(() => {
  return state.prize_list.map((item, index) => ({
    ...item,
    is_center: item.name === '开始抢红包',
    original_index: index,
  }));
});

// 用户手机号脱敏处理
const desensitizedMobile = computed(() => {
	if(messages.value.length){
		return messages.value.map((item, index) => ({
		  ...item,
		  phonetm: item.user.mobile ? item.user.mobile.slice(0, 3) + '****' + item.user.mobile.slice(-4) : '空',
		}));
	}else{
		return []
	}
});

// 获取轮盘信息
const get_lotteryIndex = async (flag) => {
     const res = await sheep.$api.tuangou.shoppoolindex();
	 if(res?.error === 0){
		 if(res.data.money){
			 price.value = res.data.money
		 }
		 let prizelist = res.data.pool
		 state.prize_list = prizelist
		 console.log('state.prize_list',state.prize_list)
		 if(state.prize_list.length){
		 	if (state.prize_list.length < 8) {
		 	  const dataToInsert = {
		 	    id: null,
		 	    image: "https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/PrizeDraw/1.png",
		 	    name: "谢谢参与",
		 	    point: "wallet",
		 	    pool_id: null
		 	  };
		 	  const newArray = new Array(8 - state.prize_list.length).fill(dataToInsert);
		 	  state.prize_list = state.prize_list.concat(newArray);
		 	}
		 }else{
		 	state.prize_list.push({
		 		id: null,
		 		image: "https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/PrizeDraw/1.png",
		 		name: "暂无开奖计划",
		 		point: "wallet",
		 		pool_id: null
		 	})
		 	const dataToInsert = {
		 	  id: null,
		 	  image: "https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/PrizeDraw/1.png",
		 	  name: "",
		 	  point: "wallet",
		 	  pool_id: null
		 	};
		 	const newArray = new Array(8 - state.prize_list.length).fill(dataToInsert);
		 	state.prize_list = state.prize_list.concat(newArray);
		 }
	 }
  
};



// 获取中奖人员名单
const get_lotteryOpenLog = async () => {
	const res = await sheep.$api.tuangou.shoppoolbuyRedBagLog();
	console.log('resresresresafefef',res)
	if(res?.error === 0){
		messages.value = res.data.data
	}
  
};

// 生命周期
onLoad((options) => {
  order_sn.value = options.order_sn
  // 初始化轮盘
  init()
  // 获取奖池金额和奖品
  get_lotteryIndex()
  // 获取中奖名单
  get_lotteryOpenLog()
});

const start = async () => {
	console.log('state.prize_list',state.prize_list)
  if (isactive.value) { return }
  //  获取抢红包结果
  const res = await sheep.$api.tuangou.shoppoolbuyRedBag({order_sn:order_sn.value});
  console.log('抽奖',res)
  if(res.data?.product_id){
	  let n = state.prize_list.findIndex(item => item.id === res.data.product_id);
	  if (n === -1) {
	    console.error('未找到对应奖品');
	    return
	  }
	  // let n = Math.floor(Math.random() * 8);
	  isactive.value = true
	  rotate.value += (1800 + (activeIndex.value - n) * 360 / 8)
	  
	  setTimeout(() => {
	    activeIndex.value = n;
	    prizeflag.value = true
	    isactive.value = false
	    win_prize.value = res.data
	  	show_result.value = true;
	  }, second.value * 1000)
  }else{
	  uni.showModal({
	  	title: '提示',
	  	content: res.msg,
	  	success: function(res) {
	  	}
	  });
  }
  
}
const init = async () => {
  //绘制转盘奖项背景颜色
  let str = '';
  let num = 8;
  let deg = 360 / num;
  let colors = [];
  str += `conic-gradient(from ${-deg / 2}deg at 50% 50%,`;
  for (var i = 0; i < num; i++) {
    if (i % 2 == 0) {
      colors.push(`${color1.value} ${i * deg}deg,${color1.value} ${(i + 1) * deg}deg,${color2.value} ${(i + 1) * deg}deg`)
    } else {
      colors.push(`${color2.value} ${i * deg}deg,${color2.value} ${(i + 1) * deg}deg,${color1.value} ${(i + 1) * deg}deg`)
    }
  }
  str += colors.join(',')
  str += ')';
  groupbg.value = str
};


// 关闭弹窗
const close_popup = async (name) => {
  show_result.value = false;
  if(win_prize.value.product_name === '谢谢参与'){
	  return
  }else{
	  sheep.$router.go('/pages/tuangou/lottery_list_time');
  }
};


</script>

<style lang="scss">
.lottery_box {
  width: 100%;
  height: 100vh;
  position: relative;

  .bgi {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .lottery-grid {
    position: absolute;
    top: 183rpx;
    left: 421rpx;
    transform: translateX(-50%);
    width: 550rpx;
    height: 550rpx;
  }
}

.lottery-container {
  // padding: 30rpx;
  // background-color: #fff;
  min-height: 100vh;

  // 标题样式
  .lottery-title {
    font-size: 40rpx;
    font-weight: bold;
    text-align: center;
    color: #ff4500;
    margin-bottom: 20rpx;
  }

  // 抢红包机会样式
  .lottery-chance {
    text-align: center;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 30rpx;
  }

  // 九宫格样式
  .lottery-grid {
    margin: 0 auto;
    //   background-color: #fe8848;
    border-radius: 20rpx;
    padding: 15rpx;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 15rpx;

    // 单个奖品格子
    .lottery-item {
      background-color: #fefbe6;
      border-radius: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;

      &.active {
        background-color: #ff9d00;
        transform: scale(0.95);
      }

      // 奖品图片
      .prize-img {
        width: 100rpx;
        height: 100rpx;
        margin-bottom: 10rpx;
        background-color: #f5f5f5;
      }

      // 奖品名称
      .prize-name {
        font-size: 24rpx;
        color: #ff3c47;
        text-align: center;
      }

      // 开始按钮包装
      .start-btn-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ff4500;
        position: relative;
        cursor: pointer;

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 120rpx solid transparent;
          border-right: 120rpx solid transparent;
          border-bottom: 60rpx solid #ff6600;
        }

        // 开始按钮文字
        .start-btn {
          color: #fff;
          font-size: 32rpx;
          font-weight: bold;
          z-index: 1;
          position: relative;
          top: -10rpx;
        }
      }
    }
  }

  // 规则样式
  .lottery-rules {
    margin-top: 40rpx;
    padding: 30rpx 0;

    .rules-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }

    .rules-content {
      .rule-item {
        font-size: 26rpx;
        color: #666;
        line-height: 1.8;
      }
    }
  }

  // 中奖弹窗
  .prize-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;

    .popup-content {
      width: 500rpx;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 40rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .popup-title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 20rpx;
      }

      .popup-prize {
        font-size: 40rpx;
        font-weight: bold;
        color: #ff6600;
        margin-bottom: 30rpx;
      }

      .popup-img {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 30rpx;
        background-color: #f0f0f0;
      }

      .popup-btn {
        width: 200rpx;
        height: 80rpx;
        background-color: #ff6600;
        color: #fff;
        border-radius: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
      }
    }
  }
}

.zhuanpan {
  width: 460rpx;
  height: 460rpx;
  position: relative;
  border-radius: 50%;
  box-shadow: inset 0 0 20rpx rgba(#fff, 0.15);
  box-sizing: border-box;
  padding: 44rpx;
  .point {
    position: absolute;
    top: 12rpx;
    bottom: 12rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &::before,
    &::after {
      content: '';
      width: 12rpx;
      height: 12rpx;
      box-shadow: 0 0 10rpx #fffa65;
      border-radius: 50%;
      display: block;
    }
  }
  @for $i from 1 through 8 {
    .point:nth-child(#{$i}) {
      transform: translateX(-50%) rotate($i * 20deg);
    }
  }
  .content {
    z-index: 2;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fcecb2;
    border-radius: 50%;
    overflow: hidden;
    .item {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 50%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform-origin: 50% 100%;
      .img {
        margin-top: 24rpx;
        line-height: 1;
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .name {
        text-align: center;
        font-size: 24rpx;
        margin-top: 12rpx;
        font-weight: bold;
        color: #914401;
        width: 100rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
      }
    }
  }
  .arrow {
    width: 30rpx;
    height: 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffea00;
    font-weight: bold;
    font-size: 40rpx;
    background: linear-gradient(to top, #7438ff, #a869ff);
    border: 8rpx solid #6932e3;
    border-radius: 50%;
    box-shadow: inset 0 0 20rpx rgba(#fff, 0.3);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 3;
    &::after {
      content: '';
      border-bottom: 38rpx solid #6932e3;
      border-left: 10rpx solid transparent;
      border-right: 10rpx solid transparent;
      position: absolute;
      left: 50%;
      top: -38rpx;
      transform: translateX(-50%);
      margin: auto;
    }
  }
}
.topriqi {
  position: absolute;
  left: 172rpx;
  top: 100rpx;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 26rpx;
  font-weight: bold;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  background: linear-gradient(90deg, #f75e4e 0%, #a61512 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.topprice {
  position: absolute;
  left: 43rpx;
  top: 175rpx;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 33rpx;
  font-weight: bold;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #f86148;
}
.toppricenum {
  position: absolute;
  left: 85rpx;
  top: 150rpx;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 61rpx;
  font-weight: bold;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #f86148;
}
.cjbtn {
  position: absolute;
  left: 180rpx;
  top: 785rpx;
  width: 400rpx;
  height: 100rpx;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Source Han Sans;
  font-size: 29rpx;
  font-weight: bold;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  background: linear-gradient(90deg, #f75e4e 0%, #a61512 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  .cjtext {
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cjsettime {
    width: 100%;
    height: 100rpx;
    text-align: center;
    .settime {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #fa5151;
      .bell {
        width: 25rpx;
        height: 25rpx;
        margin-right: 5rpx;
      }
    }
  }
}

.textzj {
  position: absolute;
  top: 928rpx;
  width: 100%;
  height: 100rpx;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 33rpx;
  font-weight: 500;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #ffffff;
  text-align: center;
  letter-spacing: 150%;
}
.textwq {
  position: absolute;
  right: 38rpx;
  top: 989rpx;
  opacity: 1;
  display: flex;
  align-items: center;

  font-family: Source Han Sans;
  font-size: 24rpx;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #3d3d3d;
}
.jt {
  width: 12rpx;
  height: 12rpx;
  border-top: 4rpx solid #000;
  border-right: 4rpx solid #000;
  transform: rotate(45deg);
  margin-left: 5rpx;
}
.mingdan {
  position: absolute;
  top: 1035rpx;
  width: 90%;
  padding: 20rpx 5%;
  height: 200rpx;
}
.nodata{
	width: 100%;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.scroll-container {
  position: relative;
  height: 90px; /* 显示三条消息的高度，可根据实际情况调整 */
  overflow: hidden;
}

.scroll-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.2s linear;
}

.message {
  height: 30px;
  line-height: 30px;
  opacity: 0;
  animation: fadeInOut 3s linear infinite;
}

@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
}
.swiper-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 10rpx 0;
  font-size: 24rpx;
  .item {
    width: 90rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.my {
  position: absolute;
  right: 0rpx;
  top: 45rpx;
  width: 200rpx;
  height: 50rpx;
  font-weight: bold;
  opacity: 1;
  border-radius: 20rpx 0 0 20rpx;
  background-color: #fa7861;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btnwq {
  position: absolute;
  width: 120rpx;
  height: 40rpx;
  left: 340rpx;
  top: 98rpx;
  font-weight: bold;
  opacity: 1;
  border-radius: 10rpx;
  background: linear-gradient(270deg, #ea250d 0%, #ef6c1c 100%);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  .pickercls {
    width: 120rpx;
    height: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
